<template>
    <div style="height: 90%">
        <el-form>
            <el-row>
                <el-col :span=10>
                    <el-form-item label="">
                        <el-date-picker
                            size="mini"
                            v-model="rangetime"
                            type="daterange"
                            align="right"
                            unlink-panels
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                        >
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="10">
                    <el-button type="primary" @click="this.initData" size="mini" icon="el-icon-search">搜索</el-button>
                </el-col>
            </el-row>
        </el-form>
        <div class="table_container">
            <el-table
                v-loading="loading"
                :data="tableData"
                highlight-current-row
                :row-class-name="tableRowClassName">
                style="width: 100%">
                <el-table-column
                    property="id"
                    label="编号"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="comments"
                    label="备注"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="starttime"
                    label="开始时间"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="duriationtime"
                    label="上课时长"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="endtime"
                    label="结束时间"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="subname"
                    label="科目"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="status"
                    label="状态"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    label="操作"
                    min-width="10%">
                    <template scope="scope">
                        <el-button-group>
                            <el-tooltip content="删除" placement="top">
                                <el-button @click="deleteRecord(scope.index,scope.row.id)" class="col-btn" size="mini" type="primary"
                                           icon="el-icon-goods"></el-button>
                            </el-tooltip>
                        </el-button-group>
                    </template>
                </el-table-column>

            </el-table>
            <div class="Pagination" style="text-align: left;margin-top: 10px;">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="this.pager.pageNo"
                    :page-sizes="[5, 10, 20, 40]"
                    :page-size="this.pager.pageSize"
                    layout=" prev, pager, next,jumper"
                >
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
    import {mapActions, mapState, mapGetters} from 'vuex'
    import headTop from '../../components/headTop'
    import {userList} from '@/api/getData'
    import ElInput from "../../../node_modules/element-ui/packages/input/src/input.vue";
    import ElOption from "../../../node_modules/element-ui/packages/select/src/option.vue";

    export default {
        name: 'userDetailCheck',
        props: {},
        data() {
            return {
                sid:null,
                rangetime:null,
                childForm: {},
                tableData: [],
                loading: false,
                pager: {pageNo: 1, pageSize: 5},
            }
        },
        components: {
            ElOption,
            ElInput,
            headTop,

        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            this.pager.pageNo = val;
            this.initData()
        },
        computed: {},
        created() {
        },
        mounted() {

        },
        methods: {
            async deleteRecord(index,id){
              const res=await deleteRecordApi();
              if(res.success==true){
                  this.$message({
                      type: 'success',
                      message: '删除成功'
                  });

              }else {

              }
            },
            async initData() {
                this.tableData = [];
                this.formData.pager = this.pager;
                const res = await userDetailCheckApi({"data": this.formData});
                var list = res.data;
                if (res.success == true) {
                    list.forEach(item => {
                        const tableData = {};
                        tableData.id = item.id;
                        tableData.name = item.name;
                        tableData.starttime=item.starttime;
                        tableData.endtime=item.endtime;
                        tableData.status=item.status;
                        tableData.subject=item.subject;
                        this.tableData.push(tableData);
                    });
                }

            },
        },
    }
</script>
<style lang="less" scoped>
    @import '../../style/mixin';

    .el-table .sks {
        background: #c2e7b0;
    }




</style>
